<template>
	<view v-if="tabs.length" class="navbar-tabs">
		<view
			v-for="(item, index) in tabs"
			:key="item.id"
			:class="['tab-item', { active: activeTabId == item.id }]"
			@click="tabClick(item.id)"
		>
			{{ item.name }}
		</view>
	</view>
</template>

<script setup lang="ts">
import type { ZjyTabItem } from "@/types/common"
import { ref, watch } from "vue"

const props = defineProps({
	tabs: {
		type: Array as PropType<ZjyTabItem[]>,
		default: () => [],
	},
	activeId: {
		type: String,
		default: "",
	},
})

const emit = defineEmits(["tabClick"])

const activeTabId = ref<string>(props.activeId)

watch(
	() => props.activeId,
	(id) => {
		activeTabId.value = id
	},
	{ immediate: true }
)

const tabClick = (id: string) => {
	activeTabId.value = id
	emit("tabClick", id)
}
</script>

<style scoped lang="scss">
.navbar-tabs {
	display: flex;
	width: 300rpx;
	height: 64rpx;
	padding: 4rpx;
	background: $grey;
	font-size: 26rpx;
	color: $c-grey-86;
	border-radius: 64rpx;
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 64rpx;
		& + .tab-item {
			margin-left: 4rpx;
		}
		&.active {
			background: $c-white;
			color: $c-black-1d;
			font-weight: bold;
		}
	}
}
</style>
